<template>
  <div class="department_main">
    <el-table :data="tableData" border highlight-current-row v-loading="loading">
      <el-table-column prop="departmentName" label="部门" :resizable="false"></el-table-column>
      <el-table-column prop="createTime" label="订阅时间" width="180" :resizable="false"></el-table-column>
      <el-table-column label="状态" width="160" :resizable="false">
        <template #default="scope">
          <el-button
            @click="resumeSubscription(scope.row)"
            type="text"
            size="small"
            v-if="scope.row.delFlag == 1"
            class="unsubscribed"
          >恢复订阅</el-button>
          <el-button
            @click="Unsubscribe(scope.row)"
            type="text"
            size="small"
            v-if="scope.row.delFlag == 0"
            class="subscribed"
          >已订阅</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageList">
      <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
    </div>
  </div>
</template>

<script>
import paging from "../paging.vue";
import { commonRequest, postRequestSplicing } from "../../api/api.js";
export default {
  name: "department",
  components: {
    paging
  },
  data() {
    return {
      tableData: [],
      // 当前页
      pageIndex: 0,
      loading: true // 添加loading
    };
  },
  mounted() {
    this.departmentRequest();
  },
  methods: {
    // 数据请求
    departmentRequest() {
      var that = this;
      this.loading = true;
      commonRequest("/api/pms/pmsGovernmentConcerns/list", {
        pageNo: that.pageIndex,
        pageSize: 10
      }).then(res => {
        // console.log(res);
        this.loading = false;
        that.tableData = res.records;
        // console.log(res.records);
        that.$refs.paging_zi.totalValue(res.total);
      });
    },
    // 是否取消订阅
    Unsubscribe(data) {
      this.$confirm("是否取消订阅?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.cancelSubscribe(data);
        })
        .catch(() => {});
    },
    // 恢复订阅
    resumeSubscription(data) {
      var that = this;
      postRequestSplicing(
        "/api/home/departmentAttention",
        `departmentId=${data.departmentId}`
      ).then(res => {
        if (res.success) {
          that.$message.success({
            message: "恢复订阅成功",
            type: "success"
          });
          that.tableData[that.tableData.indexOf(data)].delFlag = 0;
        } else {
          that.$message.error("恢复订阅失败");
        }
      });
    },
    // 确认取消订阅
    cancelSubscribe(data) {
      var that = this;
      postRequestSplicing(
        "/api/home/cancelAttention",
        `departmentId=${data.departmentId}`
      ).then(res => {
        if (res.success) {
          that.$message.success({
            message: "取消订阅成功",
            type: "success"
          });
          that.tableData[that.tableData.indexOf(data)].delFlag = 1;
        } else {
          that.$message.error("取消订阅失败");
        }
      });
    },
    // 接受当前页
    accept_CurrentValue: function(value) {
      this.pageIndex = value;
      this.departmentRequest();
    }
  }
};
</script>

<style lang="less" scoped>
.department_main {
  width: 900px;
  margin: 30px 0;
  ::v-deep(.el-button--mini),
  ::v-deep(.el-button--mini.is-round) {
    width: 64px;
    height: 24px;
    padding: 0;
  }
}
.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.subscribed {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 20px;
  padding: 4px 4px;
  background: #cbdce8;
  border-radius: 4px;
}
.unsubscribed {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #44a2ff;
  line-height: 20px;
  padding: 4px 6px;
  background: #ffffff;
  border: 1px solid #daeaf5;
  border-radius: 4px;
}
</style>
